import { View, Text } from "@tarojs/components";
import {
  AtGrid,
  AtBadge,
  AtCard,
  AtList,
  AtListItemAtForm,
  AtForm,
  AtInput,
  AtButton,
  AtMessage
} from "taro-ui";
import { useState, useEffect } from "react";
import Taro, { useRouter } from "@tarojs/taro";
import "./index.scss";

import { getProjectAdjustApi } from "../../utils/api";

const Index = () => {
  const router = useRouter();

  const [lon, setLon] = useState(0);
  const [lat, setLat] = useState(0);

  useEffect(() => {
    setLon(router.params.lon / 1000000);
    setLat(router.params.lat / 1000000);
  }, []);

  const handleChange = e => {
    setLon(e);
  };

  const handleChange2 = e => {
    setLat(e);
  };

  const onSubmit = async () => {
    const res = await getProjectAdjustApi({
      project_id: router.params.id,
      longitude: lon * 1000000,
      latitude: lat * 1000000
    });
    if (res.res === 0) {
      Taro.atMessage({
        message: "修改成功",
        type: "success"
      });
      Taro.navigateBack();
    } else {
      Taro.atMessage({
        message: res.msg,
        type: "error"
      });
    }
  };

  return (
    <View className="lonlat">
      <AtForm>
        <AtInput
          name="lon"
          title="经度"
          type="number"
          placeholder="请输入经度(6位小数)"
          value={lon}
          onChange={handleChange}
        />
        <AtInput
          name="lat"
          title="纬度"
          type="number"
          placeholder="请输入纬度(6位小数)"
          value={lat}
          onChange={handleChange2}
        />
        <AtButton type="primary" onClick={onSubmit}>
          提交
        </AtButton>
      </AtForm>
      <AtMessage />
    </View>
  );
};

export default Index;
